<style>

.share-card {
    height: 100%;
    width: 100%;
    padding-bottom: 70px;
    overflow: scroll;
}

.share-card .share-card-loading {
    position: fixed;
    top: 0;
    bottom: 0;
    min-width: 320px;
    max-width: 640px;
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 100;
}

.share-card .share-card-loading:before {
    content: '';
    height: 50px;
    width: 50px;
    background: rgba(0, 0, 0, 0.6) url("../core/resource/images/loading.gif") center no-repeat;
    background-size: 60%;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -70px 0 0 -25px;
    border-radius: 10px;
}

.share-card .share-card-main {
    position: relative;
    height: auto;
	width: auto;
    overflow: hidden;
}

.share-card .share-card-main .card-html {
    width: 100%;
    height: auto;
    overflow: hidden;
    position: relative;
}

.share-card .share-card-main .card-html img {
    display: block;
    width: 100%;
    height: auto;
    margin: auto;
}

.share-card .share-card-main .card-html .inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 99;
}

.share-card .share-card-main .card-html .inner .avatar {
    position: absolute;
    height: 80px;
    width: 80px;
    left: 50%;
    top: 100px;
}

.share-card .share-card-menu {
    min-width: 320px;
    max-width: 640px;
    width: 100%;
    min-height: 70px;
    position: fixed;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    z-index: 99;
}

.share-card .share-card-menu .tips {
    height: 1.8rem;
    line-height: 1.8rem;
    font-size: 0.7rem;
    text-align: center;
    color: #666;
}

.share-card .share-card-menu .tips .icon {
    font-size: 0.65rem;
    vertical-align: middle;
}

.share-card .share-card-menu .inner {
    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.share-card .share-card-menu .inner .list {
    padding: 10px 10px 0;
    width: 100%;
    font-size: 0;
    -webkit-text-size-adjust:none;
}

.share-card .share-card-menu .inner .item {
    height: 50px;
    width: 50px;
    background: #eee;
    display: inline-block;
    margin-right: 10px;
    border-radius: 5px;
    position: relative;
}

.share-card .share-card-menu .inner .item img {
    height: 50px;
    width: 50px;
    border-radius: 5px;
    display: block;
}

.share-card .share-card-menu .inner .item.active:before {
    content: '';
    position: absolute;
    height: 20px;
    width: 20px;
    right: 5px;
    bottom: 5px;
    background: url("../images/icon_check.png") center no-repeat;
    background-size: 100%;
}

.share-card .share-card-menu .inner .item.active:after {
    content: '';
    position: absolute;
    border: 2px solid #f73657;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 5px;
}

.share-card .share-card-mask {
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 120;
    display: none;
}

.share-card .share-card-tips {
    height: 9.5rem;
    width: 14.5rem;
    background: #fff;
    border-radius: 0.5rem;
    position: fixed;
    left: 50%;
    top: 50%;
    margin:  -4.75rem 0 0 -7.25rem;
    z-index: 121;
    overflow: hidden;
}

.share-card .share-card-tips .content {
    height: 7.5rem;
    padding: 0.8rem;
    text-align: center;
}

.share-card .share-card-tips .content .icon {
    font-size: 2.5rem;
    color: #e9778e;
}

.share-card .share-card-tips .content p {
    color: #666;
    font-size: 0.7rem;
}

.share-card .share-card-tips .button {
    height: 2rem;
    text-align: center;
    line-height: 2rem;
    color: #12ba62;
    position: relative;
}

.share-card .share-card-tips .button:before {
    content: '';
    position: absolute;
    border-top: 1px solid #f4f4f4;
    top: 0;
    left: 0;
    right: 0;
}

.share-card .share-card-tips .button:active {
    background: #f9f9f9;
}
</style>
<div class='fui-page'>
	<div class="fui-content" ng-if="pagedata.op=='list'">
		<div class="fui-searchbar bar">
			<div ng-class="{'searchbar center':1,'searchbar-active':pagedata.searchbar ==1}">
						<input type="button" ng-click="access(pagedata.op,made_query(pagedata.params))"  value="搜索" class="searchbar-cancel searchbtn">
						<div class="search-input" ng-click="pagedata.searchbar =1">
							<input type="search" placeholder="输入关键字" class="search" ng-model="pagedata.params.keyword">
						</div>
			</div>
		</div>
		<div class="fui-picturew row-2">
                <a ng-repeat="item in pagedata.list" class="item"  style="padding: 5px;" href="javascript:;" ng-click="access_json('jy_invitation/index/detail/id='+item.id)">
                    <div class="image">
                        <img style="height:11rem;width:100%" ng-src="{{tomedia(item.image) || '../core/resource/images/nopic.jpg'}}">
                        <div class="title" style="color: {titlecolor}; text-align: {titlealign};">{{item.title}}</div>
						<div class="pics">{{item.picsnum || 0}}P</div>
                    </div>
                </a>
		</div>
	</div>
    <div class="fui-content" ng-if="pagedata.op=='detail'" style="min-height:100%">
        <div class="share-card">
            <div class="share-card-mask"></div>
            <div class="share-card-loading" ng-if="pagedata.loading"></div>
			<div class="share-card-tips" ng-if="pagedata.showtips==1">
                <div class="content">
                    <p style="padding-top:20px;"></p>
                    <i class="icon icon-saoyisao1"></i>
                    <p>长按图片可保存</p>
                </div>
                <div class="button" ng-click="pagedata.showtips=0">确定</div>
            </div>
            <div ng-if="!pagedata.loading" class="share-card-main">
                <div class="card-html">
                    <img id="img" ng-src="{{tomedia(pagedata.item.bg)}}" />
                </div>
            </div>
            <div class="share-card-menu">
                <div class="inner">
                    <div class="list">
                        <div ng-repeat="tempitem in pagedata.list" ng-click="pagedata.item=tempitem;pagedata.item.id=$index" ng-class="{'item':1,'active':pagedata.item.id==$index}" data-bg="{{tempitem.bg}}"><img src="{{tomedia(tempitem.bg)}}"/></div>
                    </div>
                </div>
                <div style="margin:0 auto;text-align:center"class="tips"><i class="icon icon-information"></i> 生成须知</div>
				 <div style="margin:0 auto;text-align:center"class="tips"><i class="icon icon-saoyisao1"></i> 长按可发送邀请卡图片给好友</div>
            </div>
        </div>

    </div>
 </div>
 <script type="text/javascript">
scope.pagedata.loading=true
if(scope.pagedata.op=='list'){
	scope.tool.get_list('jy_invitation/index/list/',true);
	scope.pagedata.scroll_bottom=function(){
		scope.tool.get_list('jy_invitation/index/list/');
	}
}
if(scope.pagedata.op!='list'){
	setTimeout(function(){
		scope.pagedata.item=scope.pagedata.list[0]
		scope.pagedata.loading=false
		scope.$evalAsync();
	},600);
}
</script>